<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        #app {
            width: 1200px;
            height: auto;
            background-color: #cccccc;

        }

        .img {
            width: 110px;
            height: 140px;
        }

        li {
            list-style: none;
            width: 150px;
            height: 300px;
            background-color: #cccccc;
            border: 1px solid red;
            float: left;
            margin-right: 3px;
            margin-top: 3px;
        }

        p {
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div id="app">
        <ul id="app">
            <li v-for="item in mockData">
                <img class="img" :src="item.img" alt="">
                <P>{{item.text}}</P>
                <P style="color: red;">价格：{{item.price}}</P>
            </li>

        </ul>
    </div>

    <script src="../../day01/code/vue.js"></script>
    <!-- <script src="./作业2数据.json"></script> -->
    <script>
        new Vue({
            el: '#app',
            data: {
                mockData: [
                    
                    
                    {
                        "id": 7,
                        "img": "https://img14.360buyimg.com/jdcms/s300x300_jfs/t1/184019/38/1640/74927/608bce5aEcbe6dfa2/7649c02195797afa.jpg.webp",
                        "text": "<i class=\"more2_info_self\">自营</i>浪琴(Longines)瑞士手表 嘉岚系列 石英钢带女表 L42091917",
                        "price": 9800
                    },
                    {
                        "id": 8,
                        "img": "https://img13.360buyimg.com/jdcms/s300x300_jfs/t1/161897/28/19295/153357/607aa1caEd6d31b06/470d5052656bbc5e.jpg.webp",
                        "text": "兰叶源  木雕福猪摆件生肖猪一对客厅玄关电视柜家居装饰乔迁创意礼品 小号木福猪一只(长18厘米)",
                        "price": 726
                    },
                    {
                        "id": 9,
                        "img": "https://img13.360buyimg.com/jdcms/s300x300_jfs/t1/149094/12/15569/191462/5fbcb4d4Eca6c430b/29df94b426525dd7.jpg.webp",
                        "text": "木马人 鞋架子多层简易落地卧室客厅鞋柜宿舍实木小鞋凳门口防尘家用门后经济型换鞋凳楠竹收纳置物架 【全板密封】七层102长（加宽深度）",
                        "price": 149
                    },
                    {
                        "id": 10,
                        "img": "https://img30.360buyimg.com/jdcms/s300x300_jfs/t1/174624/5/4907/80122/607aa012Eef5409a8/a8f6e04aeee6441e.jpg.webp",
                        "text": "兰叶源  中式禅意陶瓷香炉线香插香座和尚客厅居室佛堂檀香香熏炉创意摆件 花开见佛  哑光 白",
                        "price": 286
                    },
                    {
                        "id": 11,
                        "img": "https://img11.360buyimg.com/jdcms/s300x300_jfs/t1/177054/37/1733/211397/608ba6ebEe266900e/d7b1156e9a4ca39a.jpg.webp",
                        "text": "<i class=\"more2_info_self\">自营</i>六福珠宝 足金郁金香黄金足金戒指女款开口戒 计价 L35TBGR0003 约2.89克",
                        "price": 1535
                    },
                    {
                        "id": 12,
                        "img": "https://img14.360buyimg.com/jdcms/s300x300_jfs/t1/163492/36/20005/182166/607aa1c9Eb6e2ca2e/0e153d6d035ab7f0.jpg.webp",
                        "text": "兰叶源  木雕华尔街牛摆件工艺品办公室店铺开业礼物新式装修牛装饰 小号花梨木华尔街牛(长30*高15厘米)精品木雕",
                        "price": 1166
                    },
                    {
                        "id": 13,
                        "img": "https://img30.360buyimg.com/jdcms/s300x300_jfs/t1/164099/14/9714/158384/6041fe36E58d7cd17/bb5eee24f006540d.jpg.webp",
                        "text": "【春季新品】公牛世家男鞋2021新休闲鞋男透气舒适软底百搭潮流男士板鞋潮流小白鞋运动懒人套脚鞋子男 黑色 41(标准运动码)",
                        "price": 228
                    },
                    {
                        "id": 14,
                        "img": "https://img11.360buyimg.com/jdcms/s300x300_jfs/t1/162136/12/9073/108200/603f9e2fE40632cc8/e4670383de79c9d7.jpg.webp",
                        "text": "罗季漫不锈钢晾衣架落地折叠卧室内阳台凉衣架家用婴儿晾衣架晒被子神器ljm 【1.4米】特惠款+四件套 大",
                        "price": 131
                    },
                    {
                        "id": 15,
                        "img": "https://img10.360buyimg.com/jdcms/s300x300_jfs/t1/191920/18/719/238244/608bc04eE7613da8b/fb82c513e662ff4c.jpg.webp",
                        "text": "【冰感牛仔面料】卡宾男装蓝色牛仔长裤2021春夏新款潮流简约磨白街头风 J 湖蓝色57 33",
                        "price": 299
                    },
                    {
                        "id": 16,
                        "img": "https://img20.360buyimg.com/jdcms/s300x300_jfs/t1/130459/1/9069/374142/5f5098acEc93e7813/41aa0540c683f441.jpg.webp",
                        "text": "汽车脚垫525LI 530LI 320LI X4 X5 X6 X3 X2 X1 180 全包围 咖啡色+咖啡色缇沃丝",
                        "price": 559
                    },
                    {
                        "id": 17,
                        "img": "https://img30.360buyimg.com/jdcms/s300x300_jfs/t1/171768/27/7247/168130/608c2d15E3a224958/3df7428a2844e3e3.jpg.webp",
                        "text": "BOLON暴龙眼镜2021新款猫眼太阳镜杨幂同款男女个性潮墨镜BL5052 F10-灰色",
                        "price": 670
                    },
                    {
                        "id": 18,
                        "img": "https://img10.360buyimg.com/jdcms/s300x300_jfs/t1/140349/32/7397/429223/5f50a18fE8e3909c1/a96a0496c63e6d53.jpg.webp",
                        "text": "2021款奔驰C200l E300l GLC260 C180A200 GLE350后备箱垫C260E 【菱格款】黑色米线【主垫】",
                        "price": 349
                    },
                    {
                        "id": 19,
                        "img": "https://img20.360buyimg.com/jdcms/s300x300_jfs/t1/80820/25/492/129600/5ceb5435Ec615b19d/631c49546bfb2240.jpg.webp",
                        "text": "美国斯诺德健腹轮 自动回弹静音巨轮 收腹滚轮腹肌轮健腹器健身器材 E320大黄蜂健腹轮",
                        "price": 268
                    },
                    {
                        "id": 20,
                        "img": "https://img20.360buyimg.com/jdcms/s300x300_jfs/t1/106794/37/15660/110370/5e71eb87Ea28f30fc/89fd9f5865dd4a41.jpg.webp",
                        "text": "加厚鞋盒收纳盒宿舍透明鞋柜鞋子收纳神器抽屉式塑料整理箱省空间ljm 女士翻盖白色 买6送6 共12个 30.2x21x12.2cm",
                        "price": 114
                    },
                   
                ]
            }

        })
    </script>
</body>

</html>